<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location对象</title>
</head>
<body>
<h3>location对象</h3>
<p>
    location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
</p>
<p>
    常用属性和方法： <br>
    href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转 <br>
    search 属性获取地址中携带的参数，符号 ？后面部分 <br>
    hash 属性获取地址中的啥希值，符号 # 后面部分 <br>
    reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
</p>
<a href="https://www.bilibili.com/video/BV1Y84y1L7Nn/?p=129&spm_id_from=pageDriver&vd_source=cb928a955f1123af004a2e3158113ea7" style="font-size: 20px;">
    location对象 视频讲解
</a>
<hr>

<form action="">
    <input type="text" name="用户名">
    <input type="password" name="密码">
    <button>提交</button>
</form>

<a href="#/我的">我的</a>
<a href="#/bbb">关注</a>
<a href="#/ccc">下载</a>
<button class="刷新">刷新</button>

<script>
    // 输出看信息, location是一个对象, 包含 URL地址
    console.log(window.location)

    // href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
    console.log(location.href) // 控制台输出, 完整的URL地址
    // location.href='https://www.bilibili.com/' // 可以通过赋值的形式, 实现页面跳转. 这种方法可以实现JS来跳转页面

    // 点击相关链接和提交, 地址和发生变化 location的属性,就是获取这些变化的

    // search 属性获取地址中, 符号 ？后面部分
    console.log(location.search)

    // hash 属性获取地址中的哈希值，符号 # 后面部分
    console.log(location.hash)
    // 后期vue路由的铺垫，经常用于不刷新页面，显示不同页面，比如 网易云音乐


    // reload 方法用来刷新当前页面
    const 刷新 = document.querySelector('.刷新') // 获取DOM元素
    刷新.addEventListener('click', function () { // 监控 点击事件
        // 刷新页面
        location.reload()
        // true 强制刷新
        // location.reload(true)
    })
</script>
</body>
</html>